<template>
	<twoColumn>
		<template #top-title-left>
			移动路径
			<span class="text-button" style="margin-left: 15px" @click="setEdit">
				{{ data.edit ? '完成' : '编辑' }}
			</span>
		</template>
		<template #top-title-right>
			<span class="add-path text-button" @click="addSavePath"><i class="iconfont icon-add-s"></i>添加路径</span>
		</template>
		<template #top-comtent>
			<dirPahtItem
				v-for="(item, index) in data.savePath"
				:key="item.dirPaht"
				:children="item.children"
				:path="item.dirPaht"
				:edit="data.edit"
				:is-add="selective"
				@add="addImage(item)"
				@remove="removeSavePath(index)">
				<imageChildrenItem
					v-for="(item2, index2) in item.children"
					:key="item2.imageInfo.target"
					:src="item2.imageInfo.localReference"
					:text="item2.imageInfo.filename"
					@remove="removeImage(item, index2)" />
			</dirPahtItem>
		</template>

		<template #bottom-title-left>图片</template>
		<template #bottom-title-right>
			<span class="text-button" style="margin-right: 15px" @click="invert">反选</span>
			<el-checkbox v-model="selectAll" label="全选" size="small" />
		</template>
		<template #bottom-comtent>
			<dirPahtItem
				v-for="item in data.imageDirInfo"
				:key="item.dirPaht"
				type="image"
				v-model="item.selectAll"
				:children="item.images"
				:path="item.dirPaht"
				default-spread>
				<imageChildrenItem
					v-for="item2 in item.images"
					:key="item2.target"
					type="checkbox"
					v-model="item2.checked"
					:src="item2.localReference"
					:text="item2.filename"></imageChildrenItem>
			</dirPahtItem>
		</template>
	</twoColumn>
</template>

<script setup lang="ts">
import { reactive, computed, watch } from 'vue';
import { ElNotification } from 'element-plus';
import { API } from '@v/utils/API';
import { ImageMoveConfig } from '@p/main-modeData';
import twoColumn from './base/twoColumn.vue';
import dirPahtItem from './base/dirPahtItem.vue';
import imageChildrenItem from './base/imageChildrenItem.vue';
import { ImageDirInfo, ImageInfo } from '@p/main-windowObject';

const exmits = defineEmits(['update']);

interface NewImageDirInfo extends ImageDirInfo {
	images: (ImageInfo & { checked?: boolean })[];
	selectAll?: boolean;
}

interface NewSavePath extends ImageMoveConfig {
	children: { dirPaht: string; imageInfo: ImageInfo & { checked?: boolean } }[];
}

interface Data {
	imageDirInfo: NewImageDirInfo[];
	savePath: NewSavePath[];
	edit: boolean;
}

// 数据
const data = reactive<Data>({
	imageDirInfo: [],
	savePath: [],
	edit: false,
});

// 获取图片路径信息
function getImageDirInfo() {
	API.invoke('get-image-dir-info').then((arr) => {
		data.imageDirInfo = arr;
		data.imageDirInfo.map((item) => {
			item.images.forEach((_t, i, a) => {
				a[i].checked = false;
			});

			return item;
		});

		for (let i = 0; i < data.imageDirInfo.length; i++) {
			data.imageDirInfo[i].selectAll = computed({
				get() {
					return (
						data.imageDirInfo[i].images.length > 0 && data.imageDirInfo[i].images.every((t) => t.checked)
					);
				},
				set(s) {
					data.imageDirInfo[i].images.forEach((_a1, a2) => {
						data.imageDirInfo[i].images[a2].checked = s;
					});
				},
			}) as any;
		}
	});
}

getImageDirInfo();

// 全选
let selectAll = computed({
	get() {
		for (let i = 0; i < data.imageDirInfo.length; i++) {
			for (let j = 0; j < data.imageDirInfo[i].images.length; j++) {
				if (!data.imageDirInfo[i].images[j].checked) return false;
			}
		}

		return true;
	},
	set(s) {
		for (let i = 0; i < data.imageDirInfo.length; i++) {
			for (let j = 0; j < data.imageDirInfo[i].images.length; j++) {
				data.imageDirInfo[i].images[j].checked = s;
			}
		}
	},
});

// 是否有选择的
let selective = computed(() => {
	for (let i = 0; i < data.imageDirInfo.length; i++) {
		for (let j = 0; j < data.imageDirInfo[i].images.length; j++) {
			if (data.imageDirInfo[i].images[j].checked) return true;
		}
	}

	return false;
});

// 反选
function invert() {
	for (let i = 0; i < data.imageDirInfo.length; i++) {
		for (let j = 0; j < data.imageDirInfo[i].images.length; j++) {
			data.imageDirInfo[i].images[j].checked = !data.imageDirInfo[i].images[j].checked;
		}
	}
}

// 切换编辑模式
function setEdit() {
	if (data.savePath.length > 0) {
		data.edit = !data.edit;
	}
}

//  添加保存路径
function addSavePath() {
	API.invoke('select-dir', '添加保存路径', void 0, true).then((arr) => {
		if (arr) {
			data.savePath = arr.map((p) => {
				return {
					dirPaht: p,
					children: [],
				};
			});
		}
	});
}

// 移除保存路径
function removeSavePath(index: number) {
	const obj = data.savePath.splice(index, 1)[0];

	obj.children.forEach((item) => {
		for (let i = 0; i < data.imageDirInfo.length; i++) {
			if (data.imageDirInfo[i].dirPaht === item.dirPaht) {
				item.imageInfo.checked = false;
				data.imageDirInfo[i].images.unshift(item.imageInfo);
			}
		}
	});

	if (obj.children.length === 0) {
		data.edit = false;
	}
}

// 添加图片
function addImage(obj: NewSavePath) {
	const arrs: number[] = [];
	const existent: { path: string; names: string[] }[] = [];

	data.imageDirInfo.forEach((item) => {
		item.images.forEach((t) => {
			if (t.checked) {
				arrs.push(t.id);
			}
		});
	});

	arrs.forEach((item) => {
		for (let i = 0; i < data.imageDirInfo.length; i++) {
			for (let j = 0; j < data.imageDirInfo[i].images.length; j++) {
				if (data.imageDirInfo[i].images[j].id === item) {
					if (obj.dirPaht === data.imageDirInfo[i].dirPaht) {
						for (let n = 0; n < existent.length; n++) {
							if (existent[n].path === obj.dirPaht) {
								return existent[n].names.push(data.imageDirInfo[i].images[j].filename as string);
							}
						}

						return existent.push({
							path: obj.dirPaht,
							names: [data.imageDirInfo[i].images[j].filename as string],
						});
					}

					const imgInfo = data.imageDirInfo[i].images.splice(j, 1)[0];

					obj.children.unshift({
						dirPaht: data.imageDirInfo[i].dirPaht,
						imageInfo: imgInfo,
					});

					return;
				}
			}
		}
	});

	if (existent.length > 0) {
		const message = existent
			.map((item) => {
				return item.names.join(', ') + ' 已经存在于 ' + item.path;
			})
			.join('\n');
		return ElNotification({
			title: '提示',
			message: message,
			type: 'warning',
			position: 'top-left',
		});
	}
}

// 移除图片
function removeImage(obj: NewSavePath, index: number) {
	const obj2 = obj.children.splice(index, 1)[0];

	for (let i = 0; i < data.imageDirInfo.length; i++) {
		if (data.imageDirInfo[i].dirPaht === obj2.dirPaht) {
			obj2.imageInfo.checked = false;
			data.imageDirInfo[i].images.unshift(obj2.imageInfo);
		}
	}
}

watch(
	() => data.savePath,
	(s) => {
		exmits('update', s);
	},
	{ deep: true }
);
</script>

<style scoped lang="scss">
.icon-add-s {
	font-size: 13px;
}
</style>
